/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, {Component} from "react";

import {
  AppRegistry,// AppRegistry的内置模块进行了“注册”操作
  StyleSheet,// 集中定义组件的样式
  Text,
  View,
  Image,
  ListView,
  TextInput,
  ScrollView,
  Navigator,
  TouchableHighlight,
  TouchableOpacity,
  TouchableNativeFeedback,
  NativeModules,
} from "react-native";

import {styles} from './js/MyStyle'


class FlexDimensionsBasics extends Component {
  render() {
    return (
      // 试试去掉父View中的`flex: 1`。
      // 则父View不再具有尺寸，因此子组件也无法再撑开。
      // 然后再用`height: 300`来代替父View的`flex: 1`试试看？
      <View style={{height: 300,backgroundColor:'#b6ddc3'}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}}/>
        <View style={{flex: 2, backgroundColor: 'skyblue'}}/>
        <View style={{flex: 3, backgroundColor: 'steelblue'}}/>
      </View>
    );
  }
}
;

class FlexDirectionBasics extends Component {
  render() {
    return (
      // 尝试把`flexDirection`改为`column`看看
      <View style={{
        flex: 1,
        flexDirection: 'row',//column  row
        justifyContent: 'flex-end',//flex-start、center、flex-end、space-around、space-between
        alignItems: 'flex-start',//flex-start、center、flex-end、stretch,stretch作用于子元素的width,所以要去掉子元素的width
        }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}}/>
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}}/>
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}}/>
      </View>
    );
  }
}
;


class UselessTextInput extends Component {
  render() {
    return (
      <TextInput
        {...this.props} // Inherit any props passed to it; e.g., multiline, numberOfLines below
        editable={true}
        maxLength={40}
      />
    );
  }
}

class UselessTextInputMultiline extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: 'Useless Multiline Placeholder',
    };
  }

  // If you type something in the text box that is a color, the background will change to that
  // color.
  render() {
    return (
      <View style={{
       backgroundColor: '#ffffff',
       borderBottomColor: '#000000',
       borderBottomWidth: 1 ,
      }}
      >
        <UselessTextInput
          style={{
            borderBottomWidth : 0
          }}
          multiline={true}
          numberOfLines={4}
          onChangeText={(text) => this.setState({text})}
          value={this.state.text}
        />
      </View>
    );
  }
}

import MyScene from './js/MyScene';
class SimpleNavigationApp extends Component {
  render() {
    return (
      <Navigator
        initialRoute={{ title: 'My Initial Scene', index: 0 }}
        renderScene={(route, navigator) =>
          <MyScene
            title={route.title}

            // Function to call when a new scene should be displayed
            onForward={ () => {
              const nextIndex = route.index + 1;
              navigator.push({
                title: 'Scene ' + nextIndex,
                index: nextIndex,
              });
            }}

            // Function to call to go back to the previous scene
            onBack={() => {
              if (route.index > 0) {
                navigator.pop();
              }
            }}
          />
        }
      />
    )
  }
}

class MyButton extends Component {
  _onPressButton() {
    console.log("You tapped the button!");
  }

  render() {
    return (
      <TouchableNative onPress={this._onPressButton}>
        <Text>Button</Text>
      </TouchableNative>
    );
  }
}

class MyButton2 extends Component {
  render() {
    return (
      <TouchableNativeFeedback
        onPress={this._onPressButton}
        background={TouchableNativeFeedback.SelectableBackground()}>
        <View style={{width: 150, height: 100, backgroundColor: 'red'}}>
          <Text style={{margin: 30}}>Button</Text>
        </View>
      </TouchableNativeFeedback>
    );
  }
}

import Playground from './js/Ani';
import Cxq from './js/Cxq';
class MyButton3 extends Component {
  render() {
    return (
      <TouchableOpacity>
        <Cxq label="sdfsdfsdf"/>
      </TouchableOpacity>
    );
  }
}
import Load from './js/Load.js'
import SimpleList from './js/SimpleList'
import TestToastModule from './native_modules/TestToastModule'
import TestModule from './native_modules/TestModule'
import Movie from './js/Movie'
import IScrolledDownAndWhatHappenedNextShockedMe from './js/ScrollAndLoadRes'
import AllElements from './js/AllElements'
import MyMovie from './js/MyMovie'
import TestRefresh from './js/TestRefresh'

import Sport from './test/Sport'
import SportRoute from './test/Route'

import TestUpload from './js/TestUpload'
AppRegistry.registerComponent('Test1', () => SportRoute);
AppRegistry.registerComponent('Test2', () => TestUpload);